<style>
    #browserx {font-size: 14px; }
    #browserx th.os {width: 20%;}
    #browserx tr { border-bottom: 1px solid #CCC; }
    #browserx td, #browserx th {padding: 0 15px; text-align: center; }
    #browserx th { background-color: #666; color: #FFF; font-size: 14px; }
    #browserx td.delightful { background-color:#70FF40; }
    #browserx td.good { background-color:#00FFDE; }
    #browserx td.ok { background-color:#FFEB3E; }
    #browserx td.not_good { background-color:#FF6E45; }
    #browserx td.needs_hugs { background-color:#FF433E; }
</style>
<div class="featured" class="mainElement" id="browser-matrix" style="display: none">
    <div class="slide article">
    <div class="caption">
        <h3>Browser Compatibility Matrix</h3>
    </div>
        <div class="content">
<table id="browserx">
    <tr>
        <th class="os">Windows</th>
        <th>Chrome</th>
        <th>Firefox</th>
        <th>Internet Explorer 11 [1]</th>
        <th>Internet Explorer 10</th>
        <th>Internet Explorer 9</th>
        <th>Internet Explorer 8</th>
    </tr>

    <tr>
        <td >Windows 7</td>
        <td class="delightful"> *****</td>
        <td class="delightful"> *****</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
    </tr>
    <tr>
        <td >Windows 8.1</td>
        <td class="delightful"> *****</td>
        <td class="good"> ****</td>
        <td class="needs_hugs"> *</td>
        <td> &nbsp;</td>
        <td> &nbsp;</td>
        <td> &nbsp;</td>
    </tr>
    <tr>
        <td > Windows 8</td>
        <td class="good"> ****</td>
        <td class="good"> ****</td>
        <td>&nbsp;</td>
        <td class="needs_hugs"> *</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td >Windows XP</td>
        <td class="delightful"> *****</td>
        <td class="delightful"> *****</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
        <td class="needs_hugs"> *</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <th>Mac OSX</th>
        <th>Chrome 30.0</th>
        <th>Firefox</th>
        <th>Safari 7.0</th>
        <th>Safari 6.0</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td >Mavericks</td>
        <td class="delightful"> *****</td>
        <td class="delightful"> *****</td>
        <td class="good"> ****</td>
        <td class="good"> ****</td>
        <td>&nbsp; </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <th>Linux</th>
        <th>Chrome 31</th>
        <th>Firefox</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td >Ubuntu 12.04</td>
        <td class="delightful"> *****</td>
        <td class="good"> ****</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td >Ubuntu 13.10</td>
        <td class="delightful"> *****</td>
        <td class="delightful"> *****</td>
        <td>&nbsp;</td>
        <td>&nbsp; </td>
        <td>&nbsp; </td>
        <td>&nbsp; </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan=2><strong>Legend</strong></td>
        <th>Delightful</th>
        <th>Good</th>
        <th>OK</th>
        <th>Not Good</th>
        <th>Needs Hugs</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td class="delightful"> *****</td>
        <td class="good"> ****</td>
        <td class="ok"> ***</td>
        <td class="not_good"> **</td>
        <td class="needs_hugs"> *</td>
        <td>&nbsp;</td>
    </tr>
    <tr><td colspan="7">[1] Priority development under way for the best Windows experience.</td></tr>
</table>
        </div>
    </div>
</div>
